<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-2</title>

    <style>
        *{margin: 0px;padding: 0px;}
        body{font-size: 12px;}
        li{list-style: none;}
        #box{width: 500px;margin: 50px auto;}
        #box #skin{overflow: hidden;}
        #box #skin li{float: left;width: 6px;height: 6px;border: 4px solid;margin-right: 10px;}
        #box #skin li.active{background-color: white!important;}
        #box #skin #red{background-color: red;border-color: red;}
        #box #skin #green{background-color: green;border-color: green;}
        #box #skin #black{background-color: black;border-color: black;}
        #box #nav{overflow: hidden;margin-top: 10px;}
        #box #nav li{float: left;padding: 5px 25px;border: 1px solid;border-right: none;height: 20px;line-height: 20px;}
    </style>
    <script>
        window.onload=function(){
            var oSkin = document.getElementById("skin");
            var aBtn = document.getElementsByTagName("li");
            var chaS = document.getElementById("changeSkin");

            for(var i=0;i<aBtn.length;i++){
                aBtn[i].onclick=function(){
                    for(var j=0;j<aBtn.length;j++){
                        aBtn[j].className="";
                    }
                    this.className="active";
                    chaS.href=this.id+".css";
                }
            }
        }
    </script>
    <link id="changeSkin" rel="stylesheet" href="red.css">
</head>
<body>
<div id="box">
    <ul id="skin">
        <li id="red" class="active"></li>
        <li id="green"></li>
        <li id="black"></li>
    </ul>
    <ul id="nav">
        <li>新闻</li>
        <li>娱乐</li>
        <li>体育</li>
        <li>电影</li>
        <li>音乐</li>
        <li style="border-right:1px solid;">旅游</li>
    </ul>
</div>
</body>
</html>